<template>
	<view class="item">
		<text class="status"
			:style="{ 'background-color': data.status=='1'?'#FF613F':'#087AFC' }">{{data.status=='1'?'未离开':'已离开'}}</text>




		<u-steps :current="1" direction="column">
			<u-steps-item desc="10:30">
				<text class="icon1" slot="icon"></text>
				<view class="desc" slot="desc" style="margin-bottom: 40px">
					<view style="display: flex;">
						<text
							style="margin-right: 20rpx;">{{data.userName && data.userName.length>=10 ? data.userName.substr(0,10)+"...":data.userName}}</text>
						<text style="color: #888888;">客户经理</text>
						<view class="bnt" style="color: #2979ff;font-size: 25rpx;margin-left: 20rpx;display: flex;"
							v-if="data.fillId==null" @click="fillInfo">
							<u-icon name="edit-pen" color="#2979ff" size="20"></u-icon><text>拜访填报</text>
						</view>
					</view>
					<view style="margin-top: 15rpx;color: #888888;">{{data.bankName}}</view>
				</view>
			</u-steps-item>
			<u-steps-item>
				<view class="icon-box" slot="icon">
					<text class="icon"></text>
				</view>
				<view class="desc" slot="desc" style="margin-bottom: 30px">
					<view style="display: flex;">
						<u-icon name="map" style="margin-right: 5rpx;"></u-icon>到达位置：{{data.address}}
					</view>
					<view style="margin-top: 15rpx;display: flex;">
						<u-icon name="clock" style="margin-right: 6rpx;"></u-icon>到达时间：{{data.checkInTime}}
					</view>
				</view>
			</u-steps-item>
			<u-steps-item desc="11:40" style="">
				<view class="icon-box red" slot="icon">
					<text class="icon red"></text>
				</view>
				<view class="desc" slot="desc">
					<view style="display: flex;">
						<u-icon name="map" style="margin-right: 5rpx;"></u-icon>离开位置：
						{{data.status=='1'?'未离开':data.address}}
					</view>
					<view style="margin-top: 15rpx;display: flex;">
						<u-icon name="clock" style="margin-right: 6rpx;"></u-icon>离开时间：
						{{data.status=='1'?'未签到':data.checkOutTime}}
					</view>
				</view>
			</u-steps-item>
		</u-steps>
		<!-- <view style="margin-top: 40rpx;">
			<u-button type="primary" class="bnt" text="拜访填报" @click="fillInfo()"></u-button>
		</view> -->
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				type: Object,
				default: function() {
					return {
						id: null, //签到id
						fillId: null,
						cname: '天天',
						customerId: null,
						address: '河北保定.....',
						checkInTime: '2025-05-06 16:00:00',
						checkOutTime: '2025-05-06 16:00:00',
						status: '1'
					}
				}
			},
		},
		data() {
			return {

			}
		},
		methods: {
			fillInfo() {
				console.log(this.data)
				uni.navigateTo({
					url: '/pages/gridManagement/common/checkInFill/checkInFill?checkInId=' + this.data.id +
						"&customerId=" + this.data.customerId + "&address=" + this.data.address
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.item {
		background-color: #fff;
		padding: 30rpx 50rpx;
		position: relative;
		margin-top: 20rpx;

		.status {
			position: absolute;
			top: 0;
			right: 20rpx;
			background-color: #087AFC;
			padding: 13rpx 20rpx;
			color: #fff;
			font-size: 23rpx;
		}

		.bnt {
			// position: absolute;
			// bottom: 10px;
			// right: 5px;
			display: inline-block;
			width: 30%;
			display: flex;
			z-index: 99;

		}

		.icon1 {
			display: inline-block;
			width: 21px;
			height: 21px;
			background-color: #A5D63F;
			border-radius: 100px;
		}

		.icon-box {
			width: 19px;
			height: 19px;
			border: 1rpx solid #1890FF;
			border-radius: 100px;
			display: flex;
			justify-content: center;
			align-items: center;

			&.red {
				border: 1rpx solid #FF5733;
			}

			.icon {
				display: inline-block;
				width: 10px;
				height: 10px;
				border-radius: 20px;
				background-color: #1890FF;

				&.red {
					background-color: #FF5733;
				}

			}
		}


		.desc {
			font-size: 25rpx;
			margin-top: -20rpx;
			margin-left: 8rpx;
			// margin-bottom: 10px;


		}

	}
</style>